<template>
  <div>
    <h1>后端Excel数据展示</h1>
    <table border="1">
      <thead>
        <tr>
          <!-- 动态生成表头 -->
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <!-- 动态生成表格内容 -->
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const tableData = ref([]); // 表格数据
const headers = ref([]);   // 表头

onMounted(async () => {
  try {
    // 请求后端接口获取 Excel 数据
    const response = await axios.get('http://localhost:5000/api/excel/data');
    
    if (response.data.success) {
      tableData.value = response.data.data;
      
      // 提取表头（假设第一行是表头）
      if (tableData.value.length > 0) {
        headers.value = Object.keys(tableData.value[0]);
      }
    } else {
      console.error('获取数据失败:', response.data.message);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
});
</script>

<style scoped>
table {
  border-collapse: collapse;
  margin: 20px auto;
  width: 80%;
}
th, td {
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f2f2f2;
}
</style>